<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>FormData对象的使用</title>
</head>
<body>
  <form action="http://www.baidu.com/" action="post">
    <input type="text" placeholder="文本" name="text"/>
    <input type="file" placeholder="选择文件" name="file"/>
  </form>
  <button>提交</button>
  <script>
    // 类似于post,patch,put等方法，在http协议中会在消息体中加上数据的，但是数据的格式并没有被规定，因此可以采用任意的编码格式的数据
    // 为了让服务器知道该用什么编码格式读取http消息体传递的数据，会通过Content-Type头部字段标名消息体的编码格式
    // 常用的有以下四种，并且能被各个服务器进行很好的支持：
    // application/x-www-form-urlencoded  以键值对的形式传递数据： key1=val1&key2=val2
    // multpart/form-data 用于上传文件数据类型，不能手动设置 Content-Type 为 multpart/form-data，浏览器会自动进行设置的
    // application/json;charset=uft-8 传递JSON格式的数据 {"key1": [1, 2], "key2": 'Jacob'}
    // text/xml 传递XML数据 
    // <?xml version="1.0"?>
    // <person>
    //     <name>Jacob</name>
    // </person>

    // 同理，服务器返回的http数据，也会在头部字段Content-Type中设置数据编码格式，然后浏览器再根据编码格式值进行对应解析

    // post的四种报文主体编码格式：application/x-www-form-urlencoded,multpart/form-data,application/json,text/xml
    // application/x-www-form-urlencoded 是表单默认的编码方式，但是不能用于 文件 上传
    // multpart/form-data 是表单的另一种编码方式，enctype="multipart/form-data", 可以用于二进制文件的上传
    // 具体详情：https://imququ.com/post/four-ways-to-post-data-in-http.html

    // FormData 可以模拟表单，可以上传文件，相当于 multipart/form-data

    /* FormData的作用：
    1.用一些键值对来模拟一系列表单控件：即把form中所有表单元素的name与value组装成
    一个queryString
    2. 异步上传二进制文件。（能够使用ajax上传文件） */
    document.getElementsByTagName('button')[0].addEventListener('click', () => {
      const form = document.getElementsByTagName('form')[0];
      const formData = new FormData(form); // 可以使用form表单初始化FormData
      formData.append('id', 123); // append添加键值对
      const ary = formData.entries(); // entries()能遍历所有的值
      console.log(ary.next(), ary.next(), ary.next())
      console.log(formData.get('id')); // get(key) 获取某个键值
      formData.delete('id') // 删除对应的键值
      console.log(formData.has('name'), form.has('id')); // 判断是否有该键值
    }, false)

    /*
      jquery中注意事项：
      $.ajax({
        url: 'file.php',
        type: 'POST',
        data: formdata,                    // 上传formdata封装的数据
        dataType: 'JSON',
        cache: false,                      // 不缓存
        processData: false,                // jQuery不要去处理发送的数据
        contentType: false,                // jQuery不要去设置Content-Type请求头
        success:function (data) {           //成功回调
            console.log(data);
        }
      });
    */
  </script>
</body>
</html>